<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>最强找茬</title>
    <style>
        body{
            position: relative;
            background-color: white;
        }
        * {
            margin: 0 auto;
        }
		#c1{
            margin-left: 40px;
		}
        #c1,#c2{
            width: 40px;
            background-color: red;
        }
        #tbox div p {
            float: left;
            /*border: 1px solid black;*/
            border-top-width: 1px;
            border-left-width: 1px;
            border-color: black;
            border-top-style: solid;
            border-left-style: solid;
            text-align: center;
            font-weight: bold;
            /*cursor: pointer;*/
            /*margin: 1px 1px 0 0;*/
            /*
            -moz-transition:0.3s;
            -ms-transition:0.3s;
            -o-transition:0.3s;
            transition:0.3s;
            */
        }
        input {
            height: 40px;
            width: 80px;
            /*cursor: pointer;*/
            position: relative;
            /*圆角属性*/
            border-radius: 5px;
            top: 25px;
            left: 10px;
        }
        #tbox{
            background-color: black;
        }

        #t1,#t2 {
            float:left;
            width: 345px;
            margin-top: 10px;
            height: 345px;
            padding: 5px;
            border-radius: 5px;
            padding-top: 25px;
        }

        .tp {
            /*background:url(../images/bgd.jpg) 100% 100% no-repeat;*/
            background-size: cover;
        }
        .selectp {
            /*border-block-color: #000000;*/
            box-shadow: inset 0 0 0 1px #000000;
        }
    </style>
    
    <script src="js/jquery.js"></script>
    <script>
        var colorlist = [//颜色列表
             '#ffffff',
             '#ff0000',
             '#00ff00',
             '#0000ff',
             '#ffff00',
             '#ff00ff',
             '#00ffff'
        ]
		//生成随机色
        var getRandomColor = function () {
            // return '#'+('00000'+ (Math.random()*0x1000000<<0).toString(16)).substr(-6);
            return colorlist[Math.floor(Math.random() * 7)]
        }
		// 16进制颜色值的正则
		//var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
		String.prototype.colorRgb = function () {
		  
		  // 把颜色值变成小写
		  var color = this.toLowerCase();
		  //if (reg.test(color)) {
			// 如果只有三位的值，需变成六位，如：#fff => #ffffff
			//if (color.length === 4) {
			//  var colorNew = "#";
			//  for (var i = 1; i < 4; i += 1) {
			//	colorNew += color.slice(i, i + 1).concat(color.slice(i, i + 1));
			 // }
			 // color = colorNew;
			//}
			// 处理六位的颜色值，转为RGB
			var colorChange = [];
			for (var i = 1; i < 7; i += 2) {
			  colorChange.push(parseInt("0x" + color.slice(i, i + 2)));
			}
			return "rgb(" + colorChange.join(", ") + ")";
		  //} else {
			//return color;
		  //}
		};
		//生成两个拼图
        function create() {
            x=inputx.value*1
            if(x<2)return
            t2.innerHTML=t1.innerHTML=""
            for (i = 0; i < x; ++i) {
                // let tr = document.createElement("div");
                for (j = 0; j < x; ++j) {
                    let td = document.createElement("p");
                    td.id = `taax${i}y${j}`
                    // tr.appendChild(td)
                    td.style.backgroundColor = getRandomColor();
                    // td.style.borderBlockColor = c;
                    t1.appendChild(td);
                }
            }
            b = t1.innerHTML
            b = b.replaceAll('taa', 'tbb')
            t2.innerHTML = b;
			//随机取一个块
            isx=Math.floor(Math.random() * x)
            isy=Math.floor(Math.random() * x)
            hua=window[`tbbx${isx}y${isy}`]
			yuanColor=window[`taax${isx}y${isy}`].style.backgroundColor
			//换个色
            do{
				rc = getRandomColor()
				}while (yuanColor===rc.colorRgb())//跟之前相同，重新换---出现了换完还是原来的色的情况，查下
            hua.style.backgroundColor = rc;
			
            $('div p').css('width',345/x-1+'px').css('height',345/x-1+'px')

            var p=$('p')
            p.on('mousemove',p=>{
                p=p.currentTarget.id.substr(3)
                $('.selectp').removeClass('selectp')
                $('#taa'+p).addClass('selectp')
                $('#tbb'+p).addClass('selectp')
            })
            p.on('mousedown',p=>{
                p=p.currentTarget.id.substr(3)
                c1.style.backgroundColor=window['taa'+p].style.backgroundColor
                c2.style.backgroundColor=window['tbb'+p].style.backgroundColor
            })
			//
			c1.style.backgroundColor=c2.style.backgroundColor='#ffffff'
        }
        function wind(){
            if(c1.style.backgroundColor!==c2.style.backgroundColor){//alert('对啦')
                inputx.value++
                create()
            }else {
                alert('不对哦')
            }
        }
		
    </script>
    <!--<style>-->
    <!--    div{-->
    <!--        width:200px;-->
    <!--        height:200px;-->
    <!--	}-->
    <!--	span{-->
    <!--        width:20px;-->
    <!--        height:20px;-->
    <!--	}-->
    <!--	-->
    <!--</style>-->
</head>
<div id="cbox">
    <input type="number" id="inputx" value="2" alt="2到100的数字">
    <input type="button" onClick="create()" value="生成"/>
    <input type="button" onClick="wind()" value="对比"/>
    <input id="c1" type="button" value=" "/>
    <input type="button" id="c2" value=" "/>
</div>
<div id="tbox">
    <div id="t1"></div>
    <div id="t2"></div>
</div>
<body>
</body>
<script>
    create();$('body').on('keydown', k => {
   			if(k.key=='Control')wind()
		})</script>
</html>
